<template>
  <div :class="{ bottomBorder: bottomBorder }">
    <div v-if="hospitalNameShow" class="title">{{ hospitalName }}</div>
    <div class="title" v-html="title"></div>
    <slot name="before" />

    <div v-if="fromDoc === 'restraintBand'" class="info">
      <div class="item">姓名：{{ patCur.patientName }}</div>
      <div class="item">性别：{{ gender }}</div>
      <div class="item">年龄：{{ patCur.age }}</div>
      <div class="item">住院号：{{ patCur.hospitalNumber }}</div>
      <div class="item">床号：{{ patCur.bedNumber }}</div>
    </div>

    <div v-else-if="fromDoc === 'anxietySheet'" class="info">
      <div class="item">姓名：{{ patCur.patientName }}</div>
      <div class="item">出生年月：{{ ryDateFormat(patCur.birthday) }}</div>
      <div class="item">
        病区：
        {{ docPatCur.wardName }}
        <!-- <el-input v-model="editWardName" style="width: 100px"></el-input> -->
      </div>
      <div class="item">床号：{{ patCur.bedNumber }}</div>
      <div class="item">住院号：{{ patCur.hospitalNumber }}</div>
    </div>

    <div v-else-if="fromDoc === 'mechanicalVentilation'" class="info">
      <div class="item">姓名：{{ patCur.patientName }}</div>
      <div class="item">性别：{{ gender }}</div>
      <div class="item">年龄：{{ patCur.age }}</div>
      <div class="item">
        病区：
        {{ docPatCur.wardName }}
        <!-- <el-input v-model="editWardName" style="width: 100px"></el-input> -->
      </div>
      <div class="item">床号：{{ patCur.bedNumber }}</div>
    </div>

    <div v-else-if="fromDoc === 'pressureUlcers'" class="info">
      <div class="item">科室：{{ patCur.deptName }}</div>
      <div class="item">床号：{{ patCur.bedNumber }}</div>
      <div class="item">住院号：{{ patCur.hospitalNumber }}</div>
      <div class="item">姓名：{{ patCur.patientName }}</div>
      <div class="item">性别：{{ gender }}</div>
      <div class="item">年龄：{{ patCur.age }}</div>
    </div>

    <div
      v-else-if="
        [
          'pressureMonitoring',
          'handoverRecord',
          'pressureApplication',
          'fallMonitoring',
          'pressureApplication2'
        ].includes(fromDoc)
      "
      class="info"
    >
      <div class="item">姓名：{{ patCur.patientName }}</div>
      <div class="item">出生日期：{{ ryDateFormat(patCur.birthday) }}</div>
      <div class="item">科室：{{ patCur.deptName }}</div>
      <div class="item">床号：{{ patCur.bedNumber }}</div>
      <div class="item">住院号码：{{ patCur.hospitalNumber }}</div>
    </div>

    <div
      v-else-if="['preventAspiration', 'safeNotice'].includes(fromDoc)"
      class="info"
    >
      <div class="item">科室：{{ patCur.deptName }}</div>
      <div class="item">姓名：{{ patCur.patientName }}</div>
      <div class="item">性别：{{ gender }}</div>
      <div class="item">出生日期：{{ ryDateFormat(patCur.birthday) }}</div>
      <div class="item">床号：{{ patCur.bedNumber }}</div>
      <div class="item">住院号：{{ patCur.hospitalNumber }}</div>
    </div>

    <div
      v-else-if="
        [
          'hospitalizationNotice',
          'healthEducation',
          'obligationsAndRights',
          'missuctionRisk',
          'picc',
          'difficultConsultation'
        ].includes(fromDoc)
      "
      class="info"
    >
      <div class="item">
        病区：<span>{{ docPatCur.wardName }}</span>
      </div>
      <div
        v-if="
          !['picc', 'hospitalizationNotice', 'difficultConsultation'].includes(
            fromDoc
          )
        "
        class="item"
      >
        科室：{{ patCur.deptName }}
      </div>
      <div class="item">姓名：{{ patCur.patientName }}</div>
      <div class="item">性别：{{ gender }}</div>
      <div class="item">出生日期：{{ ryDateFormat(patCur.birthday) }}</div>
      <div class="item">床号：{{ patCur.bedNumber }}</div>
      <div class="item">住院号：{{ patCur.hospitalNumber }}</div>
    </div>

    <div
      v-else-if="
        [
          'pressureUlcerRiskNotice',
          'ryAdultEstimate',
          'vte',
          'endoscopeOperate',
          'surgicalHandover',
          'InterveneHandover'
        ].includes(fromDoc)
      "
      class="info"
    >
      <div class="item">姓名：{{ patCur.patientName }}</div>
      <div class="item">出生日期：{{ ryDateFormat(patCur.birthday) }}</div>
      <div class="item">
        病区：<span>{{ docPatCur.wardName }}</span>
      </div>
      <div class="item">科室：{{ patCur.deptName }}</div>
      <div class="item">床号：{{ patCur.bedNumber }}</div>
      <div class="item">住院号：{{ patCur.hospitalNumber }}</div>
    </div>

    <div v-else-if="['nursingRecords'].includes(fromDoc)" class="info">
      <div class="item">姓名：{{ patCur.patientName }}</div>
      <div class="item">性别：{{ gender }}</div>
      <div class="item">出生日期：{{ ryDateFormat(patCur.birthday) }}</div>
      <div class="item">科室：{{ patCur.deptName }}</div>
      <div class="item">床号：{{ patCur.bedNumber }}</div>
      <div class="item">住院号：{{ patCur.hospitalNumber }}</div>
    </div>

    <div v-else class="info">
      <div class="item">
        姓名：<span>{{ docPatCur.patientName }}</span>
      </div>
      <div class="item">
        病区：
        <span>{{ docPatCur.wardName }}</span>
        <!-- <el-input v-model="editWardName" style="width: 100px"></el-input> -->
      </div>
      <div class="item">
        床号：<span>{{ docPatCur.bedNumber }}</span>
      </div>
      <div class="item">
        住院号：<span>{{ docPatCur.hospitalNumber }}</span>
      </div>
      <div class="item">
        入院日期：
        <span>{{ ryDateFormat(docPatCur.ryInfo?.ryDate) }}</span>
      </div>
    </div>

    <div>
      <div v-if="diagnosis" class="diagnosis">
        诊断：{{ zd }}
        <!-- <span style="display: none">{{ zd }}</span>
        <el-input v-model="editZd" style="width: 100%"></el-input> -->
      </div>
      <div
        v-if="mainDiagnosis"
        class="diagnosis"
        :class="{
          multiEllipsis: ['pressureApplication'].includes(fromDoc)
        }"
      >
        诊断：{{ mainZD }}
        <!-- <span style="display: none">{{ mainZD }}</span>
        <el-input v-model="editZd"></el-input> -->
      </div>
      <slot name="after" />
      <div
        v-if="fromDoc === 'pressureUlcers' || fromDoc === 'fallMonitoring'"
        class="ry-date"
      >
        入院时间：{{ ryDateFormat(docPatCur.ryInfo?.ryDate) }}
      </div>
    </div>
    <!-- <div v-if="fromDoc === 'pressureMonitoring'" class="mb-5">
      <span>入院日期：</span>
      <span>{{ ryDateFormat(patCur.rkInfo.rkDate) }}</span>
      <span style="margin-left: 40%">转入日期：</span>
      <span>{{ ryDateFormat(patCur.ryInfo.ryDate) }}</span>
    </div> -->
    <div v-if="fromDoc === 'ryAdultEstimate'" class="pt-5 mb-5 bor-t">
      <div class="f-b">基本资料</div>
      <div style="display: flex">
        <div class="mt-5">
          入科时间：{{ ryDateFormat2(patCur.rkInfo.rkDate) }}
        </div>
        <div class="mt-5" style="margin-left: 30px">
          入院诊断：
          {{ mainZD }}
          <!-- <span style="display: none">{{ mainZD }}</span>
        <el-input v-model="editZd"></el-input> -->
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { format } from 'date-fns'
import { cloneDeep } from 'lodash-es'
import { computed, defineComponent, reactive, toRefs, watch } from 'vue'

import { useDict, usePatCur } from '@/hooks'
import { getStoreFromInstance } from '@/utils/instance'

export default defineComponent({
  props: {
    title: {
      type: String,
      default: ''
    },
    bottomBorder: {
      type: [Boolean, String],
      default: true
    },
    diagnosis: {
      type: [Boolean, String],
      default: false
    },
    // 主要诊断
    mainDiagnosis: {
      type: [Boolean, String],
      default: false
    },
    hospitalNameShow: {
      type: [Boolean, String],
      default: true
    },
    data: {
      type: Object,
      default: () => ({})
    },
    fromDoc: {
      type: String,
      default: ''
    }
  },
  setup(props) {
    const state = reactive({
      hospitalName: window.hospitalName,
      editZd: '',
      editWardName: ''
    })
    const dict = useDict(['pat_sex'])
    const { zdIndex, gender } = usePatCur()

    const store = getStoreFromInstance()

    const patCur = computed(() => store.getters.patCur)

    const docPatCur = computed(() => {
      return Object.assign({}, patCur.value, props.data)
    })

    function ryDateFormat(date) {
      if (date) {
        return format(new Date(date), 'yyyy-MM-dd')
      }
      return ''
    }
    function ryDateFormat2(date) {
      if (date) {
        return format(new Date(date), 'yyyy年MM月dd日HH时mm分')
      }
      return ''
    }

    function setZd(value) {
      state.editZd = value
    }

    function setEditWardName(value) {
      state.editWardName = value
    }

    watch(
      zdIndex,
      val => {
        if (!state.editZd) {
          if (props.diagnosis) {
            state.editZd = val
          } else if (props.mainDiagnosis) {
            state.editZd = val
          }
        }
      },
      {
        immediate: true
      }
    )

    watch(
      docPatCur,
      val => {
        !state.editWardName && (state.editWardName = val.wardName)
      },
      {
        immediate: true,
        deep: true
      }
    )

    return {
      ...toRefs(state),
      patCur,
      gender,
      docPatCur,
      zd: zdIndex,
      mainZD: zdIndex,
      ryDateFormat,
      ryDateFormat2,
      setZd,
      setEditWardName
    }
  }
})
</script>

<style scoped lang="scss">
:deep(.el-input) {
  .el-input__inner {
    padding: 0 1px;
    height: 18px;
    line-height: 18px;
    border: none;
    border-radius: 0;
    font-size: 13px;
    color: #000;
  }
}

.bottomBorder {
  border-bottom: 1px solid #000;
}

.title {
  text-align: center;
  font-size: 20px;
  font-weight: bold;
  margin-bottom: 10px;
}

.info {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 10px;
  font-size: 13px;
}

.diagnosis {
  display: flex;
  align-items: center;
  // white-space: nowrap;
  padding-bottom: 10px;
}

.ry-date {
  padding-bottom: 10px;
}

.mb-5 {
  margin-bottom: 5px;
}

.mt-5 {
  margin-top: 5px;
}

.pt-5 {
  padding-top: 5px;
}

.bor-t {
  border-top: 1px solid #000;
}

.f-b {
  font-weight: bold;
}

.multiEllipsis {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  line-height: 20px;
  height: 40px;
  margin-bottom: 10px;
}
</style>
